<template>
	<view>
	 <kb-page-head :title="title"> </kb-page-head>
		<view class="swiper">
			<!-- 顶部幻灯片 -->
			<up-swiper height="240" 
					 keyName="image"
					:list="ee.indexslides" 
					:radius="0" 
					:circular="true"></up-swiper>
		
		</view>
		 <view class="index-menus ">
			 <view class="index-menus-box u-margin-left-20 u-margin-right-20">
				 <!-- 图标和文字菜单 -->
			   	<view class="menus">					
					<view
					v-for="(item,index) in ee.navmenu" :key="index" 
					 class="menu-item" @click="ee.jumpto(item.open_url , item.link_type)"  >
						 <image class="icon-image" :src="item.thumb"></image>
						 <text class="font-size13 u-padding-5">{{item.title}}</text>
					</view>
					 
				</view>		     
			 <!-- 小文字菜单 -->
				 <view class="u-flex text-menus" 
				 :style="{backgroundColor:ee.bgColor.light}">
					 <view class="u-flex u-flex-center u-flex-grow"
					   @click="ee.jumpto('/pages/single/index?id='+ aboutPage[1]?.show_id, 0)">
						 <u-icon name="clock" :color="ee.bgColor.second"></u-icon>
						 <text class="u-p-5 font-size11">{{aboutPage[1]?.title}}</text>
					 </view>
					 <view><text  class="dot font-size11">|</text></view>
					 <view class="u-flex u-flex-center u-flex-grow"
					  @click="ee.jumpto('/pages/single/index?id='+ aboutPage[2]?.show_id, 0)">
							<u-icon name="bell"  :color="ee.bgColor.second"></u-icon>
							<text class="u-p-5 font-size11">{{aboutPage[2]?.title}}</text>
					 </view>
					 <view><text  class="dot font-size11">|</text></view>
					 <view class="u-flex u-flex-center u-flex-grow" 
					 @click="ee.jumpto('/pages/single/index?id='+ aboutPage[3]?.show_id, 0)">
							 <u-icon name="eye"  :color="ee.bgColor.second"></u-icon>
							 <text class="u-p-5 font-size11">{{aboutPage[3]?.title}}</text>
					 </view>
				 </view>
				 
				 <view class="u-flex go-mall-btn u-flex-center  u-margin-25" 
				  @click="()=>ee.setPageBarName('mall')"
				 :style="{backgroundColor:ee.bgColor.weight}">
					 <view><text class="font-size16">立即购票</text></view>
				 </view>
				 <!-- index-menus-box end -->
				 <!-- 核销人员扫码核销 -->
				 <view v-if="ee.user.ishexiao==1" class="u-flex u-flex-between u-margin-25">
				 	<u-button  icon="scan" text="核销员扫码" 
					shape="circle" @click="()=>ee.jumpto('/pages/mall/verify')"
					type="success" :plain="true"></u-button>				 	 
				 </view>
				 
			 </view>
		 </view>
	
		<!-- 必玩项目 -->
		<view class="biwan-box u-m-20" 
		:style="{backgroundColor:ee.bgColor.less, background: 'linear-gradient(to bottom , '+ee.bgColor.less+', '+ee.bgColor.light+')' }">
			
			<view class="biwan-items u-padding-20">
				<view class="block-title">
					<text class="text font-size14" :style="{color:ee.bgColor.weight}">必玩项目</text>
				</view>
				
				<biwanItem :biwanPage="biwanPage"></biwanItem>
	
			</view>
		</view>
	
	<!-- 门票商品 -->
	<view class="good-box u-padding-20 u-margin-20"
	 :style="{backgroundColor:ee.bgColor.less, background: 'linear-gradient(to bottom , '+ee.bgColor.less+', '+ee.bgColor.light+')' }">
		<view class="block-title">
			<text class="text font-size14" :style="{color:ee.bgColor.weight}">热销TOP</text>
		</view>
		
		<view class="good-items u-margin-bottom-20 "
				v-for="(item,index) in goods"  :key="index" >
					 
			<suggestGoodItem :good="item"></suggestGoodItem>			 
		<!-- 推荐商品end -->
		</view>
	</view>

	<kb-footer :color="ee.bgColor.weight"></kb-footer>	
</view>
</template>

<script>
	import { 
		getBiwanPage,
		getSuggestGoodsList,
		getAboutPage
	 }  from "@/common/api.js";
	import suggestGoodItem from "./componets/suggest-good-item.vue"; 
	import biwanItem from "./componets/biwan-item.vue";
	
	export default {
		name:"pageIndex",
		components:{
			suggestGoodItem,
			biwanItem
		},
		props:{
			title: {
				Type: String,
				default: undefined
			}
		},
		data() {
			return { 
				biwanPage: undefined,
				goods :undefined,
				aboutPage:[],
			}
		},
		created() {
			//生命周期created 组件还没创建dom元素 时请求ajax
			getBiwanPage().then( (ret) =>  this.biwanPage = ret );
			
		},
		mounted() {
		 	//生命周期mounted，组件已经挂载在dom上，在请求ajax，用户会感觉组件的变化
		 	getSuggestGoodsList().then( (ret) =>  this.goods = ret.data)	
		 	getAboutPage().then((ret) => this.aboutPage = ret )
		}, 
		methods: {
			 
		},
	}
</script>

<style lang="scss">
 
 .index-menus {
	 position: relative;
	 margin-top: -20px;
	 
	 &-box{
		 background-color: #fff;
		 border-radius: 26px;
		 padding-bottom: 10px;
		 // min-height: 200px;
		 // position: absolute;
		 // top: -20px;
		 // left: 50%;
		 // transform: translatex(-50%);
		 // width: calc(100vw - 20px)
	 }
 }
.menus{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-top: 15px;

	.menu-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 24.5%;
		 
	}

	.icon-image{
		width: 45px;
		height: 45px;
		object-fit: cover;
	}
}
 
.text-menus{
	 align-items: center;
	 
	 border-radius: 30px;
	 padding: 7px;
	 margin: 20px;
	 
	 .u-icon{
		 color: #B3D0FF;
	 }
	 
	 .dot {
		 color: #B3D0FF;
	 }
}
.go-mall-btn{
	 
	 border-radius: 50px;
	 padding: 7px; 
	 color: #fff;
	 font-weight: bold;
	 
	.font-size16{
		letter-spacing: 5px;
	} 
}
.good-box{
	border-radius:20px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;

	
	.good-items{
		background-color: #fff;
		padding: .5rem;
		border-radius: 10px;
		 
	} 
 
}
	

.block-title{
	position: relative;
	height: 30px;
	
	.text{			  
		font-weight:bold;
	}
}

.biwan-box{
	border-radius:20px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
 
}
</style>
